<template>
  <el-card class="" shadow="never">
    <div slot="header">
      <span class="has-text-weight-bold">🧐 随便看看</span>
    </div>
    <div>
      <p v-for="(post,index) in list" :key="index" :title="post.title" class="block ellipsis is-ellipsis-1">
        <router-link :to="{name:'postDetail',params: { id: post.id }}" >
          <span v-if="index<9" class="tag">
            0{{ index + 1 }}
          </span>
          <span v-else class="tag">
            {{ index + 1 }}
          </span>
          {{ post.title }}
        </router-link>
      </p>
    </div>
  </el-card>
</template>

<script>
import { getRecomment } from '../../api/post'

export default {
  name: 'Recommend',
  data() {
    return {
      list: []
    }
  },
  created() {
    this.fetchRecommend()
  },
  methods: {
    fetchRecommend() {
      getRecomment().then(res => {
          const result = res.data;
          if(result.code == 0){
              this.list = result.data;
          }else{
              this.$message({
                  message: result.msg,
                  type: "error"
              })
          }
      })
    }
  },

}
</script>

<style scoped>

</style>